<template>
  <!-- 全局引入TinyMCE -->

  <el-dialog
    v-model="roleDialogVisible"
    title="编辑账户信息"
    width="40%"
    center
    @close="closeDialog(false)"
  >
    <el-form ref="validateForm" :rules="rules" label-width="120px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="adminName" disabled></el-input>
      </el-form-item>

      <el-form-item label="角色" prop="rids">
        <el-checkbox-group v-model="rids" size="small">
          <el-checkbox
            border
            v-for="role in roles"
            :key="role.id"
            :label="role.id"
            >{{ role.nameZh }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="validateLogin" type="primary"
          >修改</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs,onMounted} from "vue";
import { ElMessage } from "element-plus";
import { getRequest } from "../../../utils/api";

//加载用户所有角色
function useLoadFormData(state) {
  getRequest("/system/admin/list/roles", { adminId: state.adminId }).then(
    (res) => {
      if (res && res.code == 200) {
        console.info(res.data);
        state.roles = res.data.roles;
        state.rids = res.data.ownRoles;
      } else {
        ElMessage.error({
          message: "角色数据加载失败",
          duration: 2000,
        });
      }
    }
  );
}

export default {
  components: {},
  props: {
    roleDialogVisible: Boolean,
    adminId: String,
    adminName: String,
  },
  setup(props,{emit}) {
    const validateForm = ref();
    const rules = {};
    const state = reactive({
      roleDialogVisible: props.roleDialogVisible,
      adminId: props.adminId,
      adminName: props.adminName,
      roles: [],
      rids: [],
    });
     const closeDialog = (visible, data) =>{
      emit("onRoleCloseDialog", visible, data);
    }
    const validateLogin = () =>{
      const params = { adminId: state.adminId, rids: state.rids.toString() };
      getRequest("/system/admin/list/role", params).then((res) => {
        validateForm.value.resetFields();
        emit("onRoleCloseDialog", false, res.data);
      });
    }
    onMounted(()=>{
      useLoadFormData(state);
    })
    
    return {
      ...toRefs(state),
      rules,
      validateForm,
      closeDialog,
      validateLogin
    };
  }
};
</script>

<style>
.el-form-item__error {
  padding-top: 0px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
}
.el-form-item {
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
</style>